<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
    <link rel="stylesheet" href="cdn/vant-2.13.2/index.css">
    <link rel="stylesheet" href="cdn/xgplayer-3.0.19/index.min.css">
    <title>资源搜影视</title>
    <style>
        [v-cloak] {
            display: none;
        }

        .van-field__left-icon .van-icon, .van-field__right-icon .van-icon {
            font-size: 22px;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <van-row>
        <keep-alive>
            <component :is="active" @play-event="playEvent" :play-data="data"></component>
        </keep-alive>
    </van-row>
    <van-tabbar v-model="active" active-color="#1989fa">
        <van-tabbar-item
                :key="item.index"
                v-for="(item, index) in menus"
                :index="index"
                :name="item.name"
                :icon="item.icon"
                @click="onChange(item)">
            {{ item.label }}
        </van-tabbar-item>
    </van-tabbar>
</div>
</body>
<script src="cdn/vue-2.7.16/vue.min.js"></script>
<script src="cdn/vue3-sfc-loader-0.9.5/vue2-sfc-loader.js"></script>
<script src="cdn/axios-1.6.8/axios.min.js"></script>
<script src="cdn/vant-2.13.2/vant.min.js"></script>
<script src="cdn/xgplayer-3.0.19/index.min.js" charset="utf-8"></script>
<script src="cdn/xgplayer-hls.js-3.0.19/index.min.js" charset="utf-8"></script>
<script src="cdn/xgplayer-mp4-3.0.19/index.min.js" charset="utf-8"></script>
<script>
    // 添加响应拦截器
    axios.interceptors.response.use(res => {
        console.log(res);
        return res.data;
    }, err => {
        // 对响应错误做点什么
        return Promise.reject(err);
    });
    const options = {
        moduleCache: {vue: Vue},
        async getFile(url) {
            return fetch(url).then(res => {
                if (!res.ok) throw Object.assign(new Error(url + ' ' + res.statusText), {res});
                return res.text();
            })
        },
        addStyle(textContent) {
            document.head.insertBefore(
                Object.assign(document.createElement('style'), {textContent}),
                document.head.getElementsByTagName('style')[0] || null);
        }
    }
    //  http-vue-loader evolved into vue3-sfc-loader that supports Vue2 and Vue3
    const {loadModule} = window['vue2-sfc-loader'];
    new Vue({
        el: '#app',
        components: {},
        data() {
            return {
                active: 'home-component',
                menus: [],
                data: {}
            }
        },
        created() {
            this.$toast.loading({
                duration: 0, // 持续展示 toast
                forbidClick: true,
                message: '加载中',
            });
            //  加载组件和左侧菜单
            fetch('menus.json?' + Date.now())
                .then(response => response.json())
                .then(data => {
                    // 处理获取到的 JSON 数据
                    data.forEach(e => this.$options.components[e.name] = Vue.defineAsyncComponent(() => loadModule(e.path + '?' + Date.now(), options)))
                    this.menus = data;
                    this.$toast.clear();
                })
                .catch(error => {
                    // 处理读取文件时的错误
                    console.error('Error reading JSON file:', error);
                });
        },
        mounted() {
        },
        computed: {},
        methods: {
            onChange(item) {
                this.active = item.name;
            },
            playEvent(data) {
                this.active = 'play-component';
                this.data = data;
            }
        }
    })
</script>
</html>